<template>
    <div class="app-container">
        试卷列表
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        
        <el-form-item label="编号">
          <!-- <button v-for="(item, index) in items"  
            :key="index"  
            @click="selectItem(item)"  
            :class="{ 'active': selectedItem === item }"  
          >{{ item }}
          </button>   -->

          <button @click="addToSelection('1')">1</button>
          <button @click="addToSelection('2')">2</button>
          <button @click="addToSelection('3')">3</button>

        </el-form-item>
        <!-- {{ testQuery.number }} -->
          <el-button type="primary" icon="el-icon-search" @click="getListByNum()">查询</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="科目">
          <el-input v-model="testQuery.subject" placeholder="输入科目"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListBySub()">查询</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="教师">
          <el-input v-model="testQuery.teacherId" placeholder="输入教号"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListByTeaNum()">查询试卷</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getGradeByTeaNum()">试卷成绩</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>

    <el-table
      :data="list"
      stripe
      style="width: 100%"
      fit
      highlight-current-row
      >
      <el-table-column
        prop="subject"
        label="科目"
        width="80">
      </el-table-column>
      <el-table-column
        prop="testId"
        label="编号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="teacherId"
        label="教师id"
        width="70">
      </el-table-column>
      <el-table-column
        prop="singleChoices"
        label="单选题数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="multipleChoice"
        label="多选题数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建日期"
        width="130">
      </el-table-column>
      <el-table-column
        prop="browses"
        label="答卷量"
        width="70">
      </el-table-column>
      <el-table-column
        prop="totalMark"
        label="成绩"
        width="50">
      </el-table-column>

      <el-table-column label="删除">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open(scope.row.testId)">删除试卷</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        :current-page="cur"
        :page-size="size"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next,jumper"
        @current-change=""
        >
    </el-pagination>
  </div>
</template>

<script>
import PanThumb from "@/components/PanThumb"
    export default {
        components:{PanThumb},
        data(){
            return {
                //设置变量初始值
                cur:1,
                size:5,
                testQuery:{
                  number:[
                  ],
                  subject:'',
                  teacherId:''
                },
                list: null,
                total: 0
            }
        },
        methods:{
            addToSelection(item){
              //多选试卷编号 添加到试卷编号参数数组中
              this.testQuery.number.push(item)
            },
            getListByNum(){
                this.$axios.get("/examsystem/test/findTests",
                    {params:{testId: this.testQuery.number}}
                ).then(res=>{
                  this.list=null
                  this.list=res.data.value
                })
            },
            getListBySub(){
                this.$axios.get("/examsystem/test/findBySubject",
                {params:{subject: this.testQuery.subject}}
                )
                .then(res=>{
                  this.list=null
                  this.list=res.data.value
                })
            },
            getListByTeaNum(){
                this.$axios.get("/examsystem/test/findByTeacherId",
                  {params:{teacherId: this.testQuery.teacherId}}
                )
                .then(res=>{
                  this.list=null
                  this.list=res.data.value
                })
            },
            getGradeByTeaNum(){
                this.$axios.get("/examsystem/test/findStudentGrade",
                  {params:{teacherId: this.testQuery.teacherId}}
                )
                .then(res=>{
                    this.list=null
                  this.list=res.data.value
                })
            },
            
            
            resetDate(){
              this.testQuery={}
            },
            removeDataById(id){
              this.$axios.delete(
                "/examsystem/test/deleteTest",
                {params:{testId: id}}
              ).then(res=>{
                this.list=null
              });
            },
            open(id) {
              this.$confirm('此操作将永久删除该试卷, 是否继续?', '提示', {
                confirmButtonText: '确定',//进入then
                cancelButtonText: '取消',//进入catch
                type: 'warning'
                //封装弹窗中选项操作样式 
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.removeDataById(id)
              }).catch(() => {      
              });
            }
            
        },
    }

</script>